<template>
  <div>
     <el-table
    :data="myList"
    style="width: 100%"
    :row-class-name="tableRowClassName">
    <el-table-column
      prop="roomNo"
      label="会议室"
      >
    </el-table-column>
    <el-table-column
      prop="startTime"
      label="开始时间"
      >
      <template #default="{row}">
        <span  :style="{ color:row.endTime ? 'rgb(98, 52, 204)' : 'rgb(98, 52, 204)'}">{{row.startTime+':00'}}</span>
      </template>
    </el-table-column>
    <el-table-column
      prop="endTime"
      label="结束时间">
       <template #default="{row}">
         
        <span :style="{ color:row.endTime ? 'rgb(98, 52, 204)' : 'rgb(98, 52, 204)'}">{{row.endTime+':00'}}</span>
      </template>
    </el-table-column>
      <el-table-column
      prop="date"
      label="会议日期">
    </el-table-column>
    <el-table-column
      prop="endDate"
      label="会议结束日期">
    </el-table-column> 
   

     <el-table-column label="dialog">
         <template #default="{row}">{{'id:'+row.id}}
        <div>
        
      <el-button type="button" @click="dialogFormVisible = true">删除</el-button>
    
      <el-dialog title="请确认要删除这一纪录吗？" :visible.sync="dialogFormVisible"  @closed="dialogFormVisible = false" :append-to-body="true"> 
     
      <div slot="footer" class="dialog-footer">
        
        <el-button @click="dialogFormVisible = false">取 消</el-button>
     
           <el-button type="primary" @click="handleSave(row.id)">确 定</el-button>
                
     </div>
    </el-dialog>
    
  </div> 
    </template>
    </el-table-column>
  </el-table>
  
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogCode: true,
      dialogFormVisible: false,

      formLabelWidth: "120px",
      rules: {
        name: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
      },
      userid: "",
      myList: [
        {
          roomNo: 601,
          startTime: 9,
          endTime: 10,
          date: "2022-04-25",
          endDate: "2022-04-25",
          id: 1,
        },
        {
          roomNo: 601,
          startTime: 9,
          endTime: 11,
          date: "2022-04-26",
          endDate: "2022-04-26",
          id: 2,
        },
        {
          roomNo: 601,
          startTime: 8,
          endTime: 12,
          date: "2022-04-28",
          endDate: "2022-04-28",
          id: 3,
        },
      ],
    };
  },

  mounted() {},

  methods: {
    handleClose() {},
   
    handleSave(row) {
      console.log(row);
      this.$message.success("操作成功");
    /*   setTimeout(() => {
        location.reload();
      }, 1000); */
       
      this.dialogFormVisible = false;
    },

    //获取登录者id
    /*      getuserid() {
      let user = window.sessionStorage.getItem("access-token");
      const user1 = JSON.parse(user);
      this.userid = user1.userid;
    }, */

    //获取我的预定信息
    /*     async  getMyList(){
        const {data:res} = await this.axios.post('',this.userid);
        if(res.flag == '200') {
          if(res.num>0){
            this.myList = res.data
          }
        }
     }, */
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex === 1) {
        return "warning-row";
      } else if (rowIndex === 3) {
        return "success-row";
      }
      return "";
    },
  },
};
</script>
<style >
.el-table .warning-row {
  background: rgb(219, 212, 200);
}

.el-table .success-row {
  background: #cbd6c5;
}
</style>